<template>
    <el-upload :action="action"
               :limit="limitNum"
               :on-exceed="removeExceed"
               :before-remove="removeSuccess"
               :on-remove="flieRemove"
               :on-success="uploadSuccess"
               :before-upload="beforeUpload"
               :file-list="fileList"
               :on-preview="handlePreview"
               :accept="acceptObj.type"
               class="upload-demo"
               :drag="dragFLag"
               multiple>
        <i class="el-icon-upload" v-if="dragFLag"></i>
        <div class="el-upload__text" v-if="dragFLag">将文件拖到此处，或<em>点击上传</em></div>
        <el-button size="small" :type="btnType" v-else>点击上传</el-button>
        <div slot="tip" class="el-upload__tip" v-if="titleFlag">
            {{ acceptObj.title + `,大小不能超过5M,最多上传${limitNum}个文件` }}
        </div>
    </el-upload>
</template>


<script>
export default {
    props: {
        value: {
            type: Object
        },
        action: {
            type: String,
            default: process.env.VUE_APP_API_UPLOAD + '/space/uploadFile'
        },
        rowName: {
            type: String,
        },
        flieData: {
            type: String,
        },
        limitNum: {
            type: Number,
            default: 1
        },
        dragFLag: {
            type: Boolean,
            default: true
        },
        titleFlag: {
            type: Boolean,
            default: true
        },
        acceptObj: {
            type: Object,
            default: () => ({
                type: '.docx,.xlsx,.pdf',
                title: '只能上传.docx,.xlsx,.pdf文件'
            })
        },
        btnType: {
            type: String,
            default: 'primary'
        }
    },
    name:'uploadComp',
    data() {
        return {
            fileList: [],
            editFileData: null,
        }
    },
    created() {
        if (this.flieData) {
            this.fileList = JSON.parse(this.flieData).map(val => {
                return {name: val.name, value: val.url}
            })
        }
    },
    methods: {
        removeExceed() {
            this.$message({
                type: 'info',
                message: '请先删除原文件再上传新文件'
            });
        },
        removeSuccess(file, fileList) {
            // return this.$confirm(`确定移除 ${file.name}?`);
        },
        handlePreview(file) {
            // let urls = file.response ? file.response.result : file.value
            // this.$api.getPreviewUrl({path: urls}).then(res => {
            //     window.open(res, '_blank')
            // })
        },
        beforeUpload(file) {
            let format = '.' + file.name.split(".")[1]
            if (!this.acceptObj.type.split(',').includes(format)) {
                this.$message.warning('暂不支持' + format + '格式文件')
                return false
            } else if (file.size > 1024 * 1024 * 5) {
                this.$message.warning('文件超出大小限制!')
                return false;
            }

        },
        uploadSuccess(response, file, fileList) {
            let list = fileList.map(item => {
                if (item.response) {
                    return {name: item.name, url: item.response.fileUrl}
                } else {
                    return {name: item.name, url: item.value}
                }
            })
            this.editFileData = JSON.stringify(list)

            if (this.rowName) {
                this.value[this.rowName] = this.editFileData
            } else {
                this.$emit('setUploadFlie', this.editFileData)
            }
        },
        flieRemove(file, fileList) {
            if (fileList && fileList.length > 0) {
                let list = fileList.map(item => {
                    if (item.response) {
                        return {name: item.name, url: item.response.result}
                    } else {
                        return {name: item.name, url: item.value}
                    }
                })
                this.editFileData = JSON.stringify(list)
            } else {
                this.editFileData = null
            }

            if (this.rowName) {
                this.value[this.rowName] = this.editFileData ? this.editFileData : '';
            } else {
                this.$emit('setUploadFlie', this.editFileData ? this.editFileData : '')
            }
        },
    }

}

</script>


<style scoped lang="scss">

</style>
